<template>

    <p>个人信息填写</p>
    <div>
        姓名:
        <el-input v-model="name" />
    </div>
    <div>
        性别: 
        <el-radio-group v-model="gender">
            <el-radio value="男" size="large">男</el-radio>
            <el-radio value="女" size="large">女</el-radio>
        </el-radio-group>
    </div>
    <div>
        爱好:
        <el-checkbox-group v-model="likeList">
            <el-checkbox label="吃" value="吃" />
            <el-checkbox label="喝" value="喝" />
            <el-checkbox label="玩" value="玩" />
            <el-checkbox label="乐" value="乐" />
        </el-checkbox-group>
    </div>
    <div>
        自我介绍:
        <el-input v-model="selfintroduction" type="textarea" />
    </div>
    <p>我是{{ name }},性别 {{ gender }},我的爱好是{{ likeList }}，自我介绍是:{{ selfintroduction }}</p>










    <p>123456</p>
    文本插值: {{ text }}
    <div v-html="htmlText"></div>
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
    <img v-bind:src="imgSrc" alt="">
    <img :src="imgSrc" alt="">

    <button v-on:click="emitAlert">触发事件</button>
    <button @click="emitAlert">触发事件-简写</button>
    <div>
        <p>v-if</p>
        <p>num:{{ num }}</p>

        <button @click="num = 1">num变为1</button>
        <button @click="num = 2">num变为2</button>
        <button @click="num = 3">num变为3</button>


        <p v-if="num == 1">num现在是1----</p>
        <p v-else-if="num == 2">num现在是2======</p>
        <p v-else>num现在是3++++++</p>
        <p v-show="num == 1">num现在是1----v-show</p>
    </div>

    <p>v-for</p>
    <p v-for="(item, index) in todoArr">index: {{ index }}, item: {{ item }}</p>

    <p v-for="(value, key, index) in myObject">index:{{ index }}, key:{{ key }}, value:{{ value }}</p>

    <div>
        input
        <el-input v-model="inputValue" />
        inputValue的值是： {{ inputValue }}
    </div>
    <div>
        radio
        <el-radio-group v-model="radio">
            <el-radio value="1" size="large">Option 1</el-radio>
            <el-radio value="2" size="large">Option 2</el-radio>
        </el-radio-group>
        radio的值是 {{ radio }}
    </div>

    <div>
        checkbox
        <el-checkbox-group v-model="checkList">
            <el-checkbox label="Option A" value="A" />
            <el-checkbox label="Option B" value="B" />
            <el-checkbox label="Option C" value="C" />
        </el-checkbox-group>
        checkList的值是{{ checkList }}
    </div>

    <div>
        textarea
        <el-input v-model="textarea" type="textarea" />
        textarea的值是 ：{{  textarea }}
    </div>
    
</template>


<script setup>
import { ref } from 'vue'

// 声明了一个变量名为text的变量，然后它的值是123，并且这个变量是响应式的
const text = ref('456')

const htmlText = ref('<span>这是一个html插值</span>')

const imgSrc = ref('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')

function emitAlert() {
    alert("弹框触发了")
}


// 用来控制是否显示隐藏。
const num = ref(3)

// 
const todoArr = ref(['吃', '喝', '学', '睡'])

const myObject = ref({
    a: 'tom',
    b: 'jerry',
    c: 'bigDog'
})

const inputValue = ref('')
const radio = ref('1')

const checkList =ref([])

const textarea = ref('')


// 练习
const name = ref('')
const gender = ref('男')
const likeList = ref([])
const selfintroduction = ref('')
</script>